<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		用户名:<input type="text" value="" name="user" id="userName" /><span></span> 密码:
		<input type="password" value="" name="pass" id="password" /><span></span>
		<button>提交</button>
	</body>
	<script type="text/javascript">
		var userName = document.getElementById("userName");
		var pass = document.getElementById("password");
		var btn = document.getElementsByTagName("button")[0];
		var span = document.getElementsByTagName("span");
		var xhr = new XMLHttpRequest();
		if (window.ActiveXObject) { // IE浏览器的创建方式
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		} else if (window.XMLHttpRequest) { // Netscape浏览器中的创建方式
			xhr = new XMLHttpRequest();
		}
		//2、创建http请求
		xhr.open("GET", "user.json", true);
		//3、发送请求
		xhr.send();
		//4、设置响应http请求状态变化的事件
		xhr.onreadystatechange = function() {
			// 判断异步调用是否成功,若成功开始局部更新数据
			if (xhr.readyState == 4 && xhr.status == 200) {
				//获得从服务器端返回的数据,并局部刷新页面
				var data = xhr.responseText;
				var result = JSON.parse(data);
				userName.onblur = function() {
					var userText = this.value;
					var str = "用户名不正确";
					for (var i = 0; i < result.length; i++) {
						if (result[i].user == userText) {
							str= "用户名正确";
						} 
					}
					span[0].innerHTML=str;
					
//					for (var i = 0; i < result.length; i++) {
//						if (result[i].user == userText) {
//							span[0].innerHTML = "用户名正确";
//							break;
//						} else {
//							span[0].innerHTML = "用户名不正确";
//						}
//					}
				}
				btn.onclick = function() {
					console.log(result);
				}
			}
		}
	</script>

</html>